import React from 'react';
import ReactResizeDetector from 'react-resize-detector';
import HTMLViewer from './HTMLViewer';

// Extend window interface for plotCache
declare global {
  interface Window {
    plotCache?: Record<string, string>;
  }
}

interface PlotViewerProps {
  key?: string | number;
  id: string;
  method: {
    plotMethod: string;
    plotKey?: string;
    plotType?: string | boolean;
  };
}

const PlotViewer: React.FC<PlotViewerProps> = ({ id, method }) => {
  const data = window.plotCache?.[id] || '';

  if (method.plotMethod.startsWith('iplot')) {
    return (
      <ReactResizeDetector handleWidth handleHeight>
        {({ width, height }) => (
          <div
            style={{
              width: '100%',
              height: '100%',
              textAlign: 'center',
              position: 'absolute',
              top: '0px',
              left: '0px',
            }}
          >
            <iframe
              title="plot"
              name="plotViewer"
              srcDoc={data}
              style={{
                position: 'absolute',
                overflowX: 'scroll',
                overflowY: 'scroll',
                top: '0px',
                left: '0px',
                border: 0,
                width: '100%',
                height: '100%',
              }}
            />
          </div>
        )}
      </ReactResizeDetector>
    );
  }

  return (
    <ReactResizeDetector handleWidth handleHeight>
      <HTMLViewer content={data} id={id} />
    </ReactResizeDetector>
  );
};

export default PlotViewer;

